<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_con">
				<view class="msg">
					<view class="m_t1">
						{{$t('balance.current_balance')}}
					</view>
					<view class="m_num">{{userInfo.user_money}}</view>
				</view>
				<view class="btn" @click="$r('/pages/balance/cash')">{{$t('balance.go_cash')}}</view>
			</view>
		</view>
		<view class="main">
			<view class="main_con">
				<view class="m_tit">
					{{$t('balance.balance_detail')}}
					<view class="time">
						<picker mode="date" fields="month" @change="dateChange" :value="date">
							<label>{{date}}</label>
						</picker>
					</view>
				</view>

				<scroll-view class="list_item" scroll-y :show-scrollbar="false" enhanced @scrolltolower="loadMore">
					<block v-for="(item,index) in list" :key="'r_'+index">
						<view class="row">
							<view class="r_con">
								<view class="r_c_t1">{{show_desc(item.type)}}</view>
								<view class="r_c_t2">{{item.change_time|formatTime}}</view>
							</view>
							<view class="r_num">
								<label class="num" v-if="item.account > 0">+{{item.account}}</label>
								<label class="num n2" v-if="item.account < 0">{{item.account}}</label>
							</view>
						</view>
					</block>
				</scroll-view>

				<block v-if="empty_show">
					<view
						style="width:100%;margin-top: 20vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -90%);"
						v-if="list.length==0">
						<u-empty mode="list" iconSize="120" :text="$t('nodata')"></u-empty>
					</view>
				</block>

			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getNowDate
	} from '@/common/public.js'
	export default {
		data() {
			return {
				date: '',
				page: 1,
				load_type: 'more',
				empty_show: 0,
				loading: 0,
				list: [],
				userInfo:{}
			};
		},
		onReachBottom() {
			uni.$on('refresh', () => {
				this.pageinit();
			});
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad() {
			this.date = getNowDate();
			// this.loadData();
		},
		onShow() {
			this.getMyData()
			this.pageinit();
			// this.loadData();
		},
		methods: {
			getMyData() {
				let url = this.site_url + 'api/index/getMyData';
				let param = {}
				this.areq(url, param, 'POST').then(res => {
					if (res.code == 1) {
						uni.setStorage({ //缓存用户登陆状态
							key: 'userInfo',
							data: res.data
						});
						this.userInfo = res.data
					}
				});
			},
			show_desc(type) {
				//let lang = uni.getLocale();
				let ty = parseInt(type);
				let tran = 'acc.type' + ty;
				let str = this.$t(tran) || 'not thing';
				return str;
			},
			pageinit() {
				this.page = 1;
				this.load_type = 'more';
				this.list = [];
				this.loadData();
			},
			loadData() {
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let date = this.date.split('-');
				let url = this.site_url + 'api/auth/member/my_money_list?page=' + this.page + '&ym=' + date.join('');

				this.areq(url).then(res => {
					this.empty_show = 1;
					this.loading = 1;
					if (res.code == 1) {
						this.page++;
						this.list = [...this.list, ...res.data];
						if (res.data.length == 10) {
							this.load_type = 'more';
						} else {
							this.load_type = 'no_more';
						}
					} else {
						this.load_type = 'no_more';
					}
				})
			},
			dateChange(e) {
				this.date = e.detail.value;
				this.pageinit();
			},
			loadMore() {
				console.log('更多数据')
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100%;
		position: fixed;
		z-index: 98;
		padding: calc(var(--status-bar-height) + 4vw) 4% 3vw;
		background: $main_color2;

		.h_con {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			background: $main_color_s2;
			padding: 4vw;
			border-radius: 3vw;

			.msg {
				flex: 1;

				.m_t1 {
					width: 100%;
					font-size: 3.5vw;
					color: #fff;
					display: flex;
					align-items: center;
				}

				.m_num {
					font-size: 6vw;
					font-weight: bold;
					color: #fff;
					padding-top: 2vw;
				}
			}

			.btn {
				padding: 1.8vw 3vw;
				background: #222;
				color: #fff;
				font-size: 3.5vw;
				border-radius: 1.5vw;
				margin-top: 3vw;
			}
		}
	}

	.bg_item {
		@include bg_item(90vw);
	}

	.main {
		width: 100%;
		position: relative;
		z-index: 2;
		padding: calc(var(--status-bar-height) + 31vw) 4% 0;

		.main_con {
			@include card_style();

			.m_tit {
				width: 100%;
				padding: 0 0 2vw;
				border-bottom: 1rpx solid #efefef;
				font-size: 4.3vw;
				font-weight: bold;
				position: relative;
				color: $main_color4;

				.time {
					position: absolute;
					right: 0;
					padding: 1vw 3vw;
					font-size: 3vw;
					color: #222;
					background: #efefef;
					border-radius: 4vw;
					bottom: 2vw;
					font-weight: 400;
				}
			}

			.list_item {
				width: 100%;
				height: calc(100vh - var(--status-bar-height) - 70vw);
				margin-top: 3vw;

				.row:not(:first-child) {
					margin-top: 2vw;
				}

				.row {
					width: 100%;
					padding: 2vw 0;
					display: flex;
					align-items: center;

					.r_con {
						flex: 1;

						.r_c_t1 {
							width: 100%;
							font-size: 4vw;
							font-weight: bold;
							color: $main_color5;
							@include text_over_style(1);
						}

						.r_c_t2 {
							width: 100%;
							color: $main_color4;
							font-size: 3.3vw;
							padding-top: 2vw;
						}
					}

					.r_num {
						font-size: 5vw;
						font-weight: bold;

						.num {
							color: $main_color4;
						}

						.n2 {
							color: $price_color;
						}
					}
				}
			}
		}
	}
</style>